

let UI = require('../src/uis/ui');
require('../src/uis/main.css');

window.onload = function () {
   console.log(`start............`);

   let div = new UI.Div();
   document.body.appendChild(div.dom);

   let input1 = new UI.Input('text1');
   div.add(input1);

   div.add(new UI.Break());

   let textArea = new UI.TextArea();
   textArea.setValue('this is console!');
   div.add(textArea);

   div.add(new UI.HorizontalRule());

   let ageSelect = new UI.Select();
   ageSelect.setOptions({
      small:"0-18",
      middle:"19-30",
      old:"31-100"
   });
   ageSelect.setValue('middle');
   div.add(ageSelect);
   ageSelect.onChange((event)=>{
      console.log(`ageSelect changed! value:${ageSelect.getValue()}`);
   });

   div.add(new UI.Break());
   let ynBox = new UI.Checkbox(true);
   div.add(ynBox);
   ynBox.onChange((event)=>{
      console.log(`yn is ${ynBox.getValue()}`);
   });

   div.add(new UI.HorizontalRule());

   // color
   let color = new UI.Color();
   div.add(color);

   // number
   div.add(new UI.Break());
   let num = new UI.Number(1.12);
   div.add(num);

   // Integer
   div.add(new UI.Break());
   let it = new UI.Integer(12);
   div.add(it);

   div.add(new UI.Break());

   // panel
   let panel = new UI.Panel();
   panel.setBackground('cyan');
   panel.setWidth('400px');
   panel.setHeight('200px');
   // panel.setTextContent('dsfasdfasdfadsf');
   div.add(panel);

   // tab
   let myTab = new UI.TabbedPanel();
   div.add(myTab);


   // page a
   let pageA = new UI.Text('This is page A!');
   let pageB = new UI.Div();
   pageB.add(new UI.Text('This is page B!'));

   myTab.addTab('a',"bind",pageA);
   myTab.addTab('b','keyframe',pageB);
   myTab.select('b');

   // listbox
   let list = new UI.Listbox();
   list.setItems([
      {name:'Text 1'},
      {name:'Text 2'},
      {name:'Text 3'},
      {name:'Text 4'},
      {name:'Text 5'},
   ]);
   div.add(list);
   list.selectIndex(1);

   // button
   let idx = 0;
   let btn = new UI.Button('click me!');
   btn.onClick(()=>{
      console.log(`我被点击了!`);
      let listItem = new UI.Listbox.ListboxItem(list);
      listItem.add(new UI.Text(`new Added:${idx++}`));

      let nBtn = new UI.Button('Del');
      nBtn.onClick(()=>{
         console.log('remove Item');
         list.remove(listItem);
      });
      listItem.add(nBtn);
      list.add(listItem);
   });
   div.add(btn);
};
